<!-- 评论管理 -->
<template>
  <el-container>
    <el-main>
      <!-- 搜索 -->
      <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="称呼">
            <el-input v-model="formInline.title" placeholder="请输入称呼" />
          </el-form-item>

          <el-form-item label="Email">
            <el-input v-model="formInline.email" placeholder="请输入联系方式" />
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="formInline.status" placeholder="请选择状态">
              <el-option label="已发布" value="1" />
              <el-option label="草稿" value="0" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getList">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 表格 -->
      <el-card>
        <div v-if="multipleSelection.length">
          <el-button @click="passAll('1')"> 通过 </el-button>

          <el-button @click="rejectAll('0')"> 拒绝 </el-button>

          <el-button @click="delAll"> 批量删除 </el-button>
        </div>

        <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />

          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <div class="status-box">
                <span :class="scope.row.status ? 'true' : 'false'"></span>
                <span>{{ scope.row.status ? "通过" : "未通过" }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="title" label="称呼" />

          <el-table-column prop="email" label="联系方式" width="250" />

          <el-table-column prop="original" label="原始内容" width="200">
            <template #default="scope">
              <el-popover
                :width="200"
                placement="top"
                title="评论详情-原始内容"
                trigger="hover"
                :content="scope.row.original"
              >
                <template #reference>
                  <el-button type="text">查看内容</el-button>
                </template>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column prop="html" label="HTML内容" width="200">
            <template #default="scope">
              <el-popover
                :width="200"
                placement="top"
                title="HTML详情-原始内容"
                trigger="hover"
                :content="scope.row.html"
              >
                <template #reference>
                  <el-button type="text">查看内容</el-button>
                </template>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column prop="article" label="管理文章" width="200">
            <template #default>
              <div>
                <el-button type="text">文章</el-button>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="parentcComment" label="父级评论" width="200" />

          <el-table-column label="操作" width="300" fixed="right">
            <template #default="scope">
              <div class="btn-box">
                <el-button type="text" @click="pass(scope.row.id, '1')">
                  通过
                </el-button>

                <el-button type="text" @click="reject(scope.row.id, '0')">
                  拒绝
                </el-button>

                <el-button type="text">回复</el-button>

                <el-popconfirm
                  title="确认删除这个评论?"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  @confirm="delItem(scope.row.id)"
                >
                  <template #reference>
                    <el-button type="text"> 删除 </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        >
        </el-pagination>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import {
  apiComment,
  apiCommentDel,
  apiPassOrRejectComment,
} from "@/api/comment";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

/**************************************************/

const list = ref([]);

const page = ref({
  current: 1,
  size: 10,
});

const total = ref(0);

const formInline = ref({
  title: "",
  status: "",
  email: "",
});

const multipleSelection = ref([]);

/**************************************************/

// 重置
const reset = () => {
  formInline.value = {};

  getList();
};

// 切换分页
const currentChange = (pageIndex) => {
  page.value.current = pageIndex;

  getList();
};

// 删除
const delItem = (id) => {
  apiCommentDel({ id }).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 全部删除
const delAll = () => {
  apiCommentDel(multipleSelection.value).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 通过
const pass = (id, status) => {
  apiPassOrRejectComment({ id, status }).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 全部通过
const passAll = (status) => {
  apiPassOrRejectComment({
    status,
    multipleSelection: multipleSelection.value,
  }).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 拒绝
const reject = (id, status) => {
  apiPassOrRejectComment({ id, status }).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 全部拒绝
const rejectAll = (status) => {
  apiPassOrRejectComment({
    status,
    multipleSelection: multipleSelection.value,
  }).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

/**************************************************/

const getList = () => {
  apiComment({ ...page.value, ...formInline.value }).then((res) => {
    list.value = res.data;

    total.value = res.total;
  });
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss"></style>
